<!-- 登录记录 -->
<template>
   <div class="login_record_content">
      <div class="main_content" @scroll="scroll">
         <div class="item" v-for="(row, index) in result.list" :key="index">
            <div class="top">
               <div>{{ t('loginRecord_page_title') }}</div>
               <div class="time">{{ convertObjectToDateString(row.login_time) }}</div>
            </div>
            <div class="mid">
               <div class="title">{{ t('loginRecord_page_tip') }}</div>
               <div class="info">
                  <div class="info_name">{{ t('loginRecord_page_device') }}：</div>
                  <div>{{ deviceMap[row.device_model] || '--' }}</div>
               </div>
               <div class="info">
                  <div class="info_name">{{ t('loginRecord_page_date') }}：</div>
                  <div>{{ row._time }}</div>
               </div>
               <div class="info">
                  <div class="info_name">{{ t('loginRecord_page_address') }}：</div>
                  <div>{{ row.location || row.ip || '--' }}</div>
               </div>
               <div class="info">
                  <div class="info_name">{{ t('loginRecord_page_way') }}：</div>
                  <div>{{ typeMap[row.login_type] || '--' }}</div>
               </div>
               <div class="tip">{{ t('loginRecord_page_subtip') }}</div>
            </div>
            <div class="bot" @click="jumpToPass">
               <div>{{ t('loginRecord_page_changepass') }}</div>
               <div><iconpark-icon name="arrow2"></iconpark-icon></div>
            </div>
         </div>
         <nut-empty v-if="!loading && !result.list.length" :description="t('loginRecord_page_nodata')"></nut-empty>

         <div id="more" style="height: 30px;"></div>
      </div>
   </div>
</template>


<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue"
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";
import { convertObjectToDateString } from "@/utils/publicMethods";
import { useRouter } from "vue-router"
import { useI18n } from "vue-i18n";
import { getIPAddress } from "@/utils/useStoreMethods";


const { t } = useI18n();

const router = useRouter()
const jumpToPass = () => {
   router.push({
      name: 'modifyPassWord'
   })
}
const deviceMap: any = ref({ // deviceid=1表示web登录， 2表示安卓，3表示苹果，其它值就表示其它设备
   1: 'WEB',
   2: 'Android',
   3: 'IOS',
   4: t('else')
})
const typeMap: any = ref({
   2: t('loginRecord_page_auto'),
   3: t('loginRecord_page_typephone'),
   4: t('loginRecord_page_typeaccount'),
   5: t('loginRecord_page_typeemail')
})

// 数据
const loading = ref(false)
const result: any = reactive({ // 结果
   total_page: 0,
   list: []
})
// 获取
const page: any = ref(1)
const queryData = () => {
   const query = NetPacket.req_login_record_list()
   query.page = page.value
   // @ts-ignore
   query.currency = 0
   // @ts-ignore
   query.dateType = 0
   PKwebsocket.instance.send(query, true, {
      callbackName: 'msg_notify_login_record_list',
      callback: resultHandle
   })
   loading.value = true
}
// 重置数据
const resetData = () => {
   result.total_page = 0
   result.list = []
   page.value = 1
   setTimeout(() => {
      queryData()
   }, 0)
}
resetData()
// 数据处理
const resultHandle = async (rs: any) => {
   loading.value = false
   result.total_page = rs.total_pages
   result.list.push(...rs.login_record_list)

   // 排序
   result.list = result.list.map((item: any) => {
      item._time = convertObjectToDateString(item.login_time)
      return item
   }).sort((a: any, b: any) => {
      return Date.parse(b._time) - Date.parse(a._time)
   })

   // 获取地点
   getIPAddress(result.list)

}



// 加载更多
const pullup = () => {
   console.error(result.total_page <= result.list.length, loading.value)
   if (result.total_page <= result.list.length) return loading.value = false
   if (loading.value) return
   page.value++
   queryData()
}

// 滚动监听
let more: any = null
const scroll = () => {
   if (!more) return
   if (isElementInViewport(more)) {
      pullup()
   }
}


onMounted(() => {
   more = document.querySelector('#more')
})

// 检查 #more 是否在屏幕内
function isElementInViewport(el: any) {
   try {
      const rect = el.getBoundingClientRect();
      return (
         rect.top >= 0 &&
         rect.left >= 0 &&
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
         rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
   } catch {
      return false
   }
}
</script>


<style lang="scss" scopd>
.login_record_content {
   padding: 12px 14px 0 14px;
   height: calc(var(--vh) * 100 - 106px);
   overflow: hidden;
   display: flex;
   flex-direction: column;

   .main_content {
      flex: 1;
      overflow-y: auto;
      flex-shrink: 0;

      .item {
         margin-bottom: 14px;
         border-radius: 8px;
         background: #131232;
         box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

         .top {
            height: 48px;
            padding: 0 14px;
            border-bottom: 0.5px solid #242352;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #FFF;
            font-size: 14px;
            font-weight: 500;

            .time {
               color: #C6C4F5;
               font-size: 12px;
            }
         }

         .mid {
            padding: 14px 17px;

            .title {
               margin-bottom: 12px;
               color: #FFF;
               font-size: 14px;
               font-weight: 500;
               line-height: 14px;
            }

            .info {
               margin-bottom: 10px;
               color: #FFF;
               font-size: 12px;
               font-weight: 500;
               line-height: 12px;
               display: flex;
               align-items: center;
               justify-content: flex-start;

               .info_name {
                  color: #C6C4F5;
                  font-weight: 400;
               }
            }

            .tip {
               margin-top: 12px;
               color: #FF5252;
               font-size: 12px;
               font-weight: 400;
               line-height: 16px;
            }
         }

         .bot {
            height: 48px;
            padding: 0 14px;
            border-top: 0.5px solid #242352;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #5D69FF;
            font-size: 14px;
            font-weight: 500;
         }
      }
   }
}
</style>
